<template>
  <div>
    <!-- 头部导航 -->
    <header class="header">
      <div class="w">
        <ul class="headNav">
          <template v-if="!userInfo.account">
            <li @click="$router.push('/login')">请先登录</li>
            <li>免费注册</li>
          </template>
          <template v-else>
            <li>{{ userInfo.account }}</li>
            <li @click="loginOut">退出登录</li>
          </template>
          <li>我的订单</li>
          <li>会员中心</li>
          <li>帮助中心</li>
          <li>关于我们</li>
          <li>
            <i class="iconfont icon-phone"></i>
            手机版
          </li>
        </ul>
      </div>
    </header>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    // 判断用户是否存在 显示登录和退出等录
    userInfo() {
      return this.$store.state.User.userInfo;
    },
  },
  methods: {
    // 退出登录
    loginOut() {
      // 清空vuex中的数据
      this.$store.commit("User/setUserInfo", {});
      // 清空购物车的数据
      this.$store.commit("Cart/clearList");
      // 跳转到登录页面
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 50px;
  background-color: #333333;
  color: #666666;
  .w {
    height: 100%;
  }
  .headNav {
    height: 100%;
    display: flex;
    align-items: center;
    float: right;
    li {
      width: 100px;
      height: 14px;
      line-height: 14px;
      text-align: center;
      color: #cdcdcd;
      border-right: 2px solid #666;
      &:last-child {
        border-right: none;
      }
    }
    li:hover {
      color: #27ba9b;
      cursor: pointer;
    }
  }
}
</style>
